<template>
  <div class="setup">
    <div class="wrapper">
      <div class="header">
        <router-link
          tag="div"
          to="/my"
          class="header_left iconfont icon-guanbi"
        ></router-link>
        <div class="header_center">常用设置</div>
        <div class="header_right"></div>
      </div>
      <div class="CommonSetting">
        <ul class="ulone">
          <li>
            <p>非Wi-Fi网络下显示图片</p>
            <van-switch
              v-model="checked1"
              active-color="#fc9632"
              size="24px"
              inactive-color="#dcdee0"
            />
          </li>
          <li>
            <p>接收消息通知</p>
            <van-switch
              v-model="checked2"
              active-color="#fc9632"
              size="24px"
              inactive-color="#dcdee0"
            />
          </li>
          <li>
            <p>内容推荐</p>
            <van-switch
              v-model="checked3"
              active-color="#fc9632"
              size="24px"
              inactive-color="#dcdee0"
            />
          </li>
        </ul>
        <ul class="ultwo">
          <li>
            <van-cell title="给个鼓励吧" is-link />
          </li>
          <li>
            <van-cell title="当前版本" value="V6.3.47" />
          </li>
          <li>
            <van-cell title="使用帮助" is-link />
          </li>
          <li>
            <van-cell title="营业执照" is-link />
          </li>
          <li>
            <van-cell title="隐私政策" is-link />
          </li>
          <li>
            <van-cell title="服务条款" is-link />
          </li>
          <li>
            <van-cell title="拨打服务热线" is-link value="440-118-1166" />
          </li>
        </ul>
      </div>
      <div class="Logout" v-show="out" @click="determine">
        <p>退出登录</p>
      </div>

      <van-dialog
        v-model="show"
        title="提示"
        show-cancel-button
        @confirm="confirment"
      >
        <p class="check">
          确认退出此账号么？
        </p>
      </van-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked1: false,
      checked2: true,
      checked3: true,
      out: false,
      show:false,
    };
  },
  methods:{
    confirment(){
        window.localStorage.removeItem("token");
        window.localStorage.removeItem("userId");
        this.out = false;
        this.show=false
        this.$toast("退出成功")
        this.$router.push("/my")
    },
    determine(){
        this.show=true 
    }
  },
  created() {
    let token = window.localStorage.getItem("token");
    if (token) {
      //判断是否存在token，不存在显示登录，存在显示用户信息
      this.out = true;
    } else {
      this.out = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.setup {
  height: 100%;
  .wrapper {
    height: 100%;
    background-color: #faf4ee;
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    .header {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 1;

      .header_left {
        color: #fc9632;
        font-size: 20px;
        line-height: 50px;
      }
      .header_center {
        font-size: 18px;
      }
      .header_right {
        width: 20px;
      }
    }
    .CommonSetting {
      padding: 0 16px;
      ul.ulone {
        margin: 16px 0;
        background-color: #fff;
        border-radius: 8px;
        & > li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 20px;
        }
      }
      ul.ultwo {
        border-radius: 8px;
        background-color: #fff;
        border-radius: 8px;
        li {
          .van-cell {
            color: #000;
            font-size: 16px;
            padding: 10px 20px;
            background-color: transparent;
          }
          .van-cell__value {
            font-size: 14px;
          }
        }
      }
    }
    .Logout {
      margin: 16px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      color: red;
      border-radius: 8px;
    }
    p.check {
      text-align: center;
      padding: 20px 30px;
    }
  }
}
</style>